<template>
  <div class="wrap">
    <div class="content">
      <!-- 商品詳情 -->
      <div class="detail">
        <div class="detail_left">
          <div class="imgbox">
            <img :src="imgUrl" alt="">
          </div>
          <div class="imglist">
            <div v-for="(item,index) in imglist" :key='index'><img :src=item alt=""  @click="changebigImg($event,item)"></div>
          </div>
        </div>
        <div class="detail_right">
          <div class="detail_title">{{gooddata.name}}</div>
          <div class="detail_price">
            <div>原價：<span>${{gooddata.retailPrice}}</span></div>
            <div>現價：<span>${{gooddata.counterPrice}}</span></div>
            <div style="display: flex;justify-content: space-between;width:100%">
              <div style="color:#BE9A67">
                 pv : {{gooddata.pvValue}}
              </div>
              <div style="display: flex;">
                  <div class="detail_price3">
                     <img @click="addCoolect()" src="@/assets/collect2.png" alt="">
                    <div ><span>收藏</span>
                    <!-- <span>{{userHasCollect}}</span> -->
                    </div>
                  </div>
                  <div class="detail_price3">庫存：{{kucunNum}}{{gooddata.unit}}</div>
              </div>
              
            </div>
          </div>
          <div class="component">  
            <div v-html="gooddata.brief"></div>
            <!-- <p>{{gooddata.brief}}</p>                           -->
            <!-- <p>成分：</p>
            <p>水、豬肉、乳鴿、海底椰、蟲草花、合掌瓜、淮山、桂圓、薑、鹽</p>
            <p>食用方法： </p>
            <p>方法壹：將整個湯包放入沸水中加熱 5 分鐘，即可食用。</p>
            <p>方法二：剪開湯包，將湯料倒入鍋中加熱至滾後即可食用。</p>
            <p>方法三：剪開湯包，將湯料倒入微波爐容器中，以800W加熱5分鐘至熱透即可食用。</p>
            <p>註：</p>
            <p>加熱時間需因應不同爐具或微波爐而自行調節。</p>
            <p>警告：</p>
            <p>切勿直接將鋁箔袋放入微波爐加熱。</p> -->
          </div>
          <div class="addcar">
            <div>
              <el-input-number :min="1" :max="kucunNum>0?kucunNum:1" :value="goodnum" v-on:input="handleBlur1" @change="handleGoodNum( goodnum )"></el-input-number>
            </div>
            <div @click="addToCart(gooddata,goodnum)">加入購物車</div>
          </div>
        </div>
      </div>
      <!-- 商品簡介和評論 -->
      <div class="introduction">
        <div class="introduction_title">
          <div :class="isIntro?'is_in_Active':'is_in_unActive'" @click="changeIntro(0)">商品簡介</div>
          <div :class="!isIntro?'is_in_Active':'is_in_unActive'" @click="changeIntro(1)">商品評論</div>
        </div>
        <div v-show="isIntro" class="introduction_con">
          <div v-html="gooddata.detail"></div>
        </div> 
        <div v-show="!isIntro" class="introduction_comment">
          <div class="comment_item" v-for="(item,index) in comment" :key="index"> 
            <div class="comment_item_name">{{item.nickname}}</div>
            <div class="comment_item_rate"><el-rate v-model="item.star" disabled></el-rate></div>
            <div class="comment_item_text">{{item.content}}</div>
            <div class="comment_item_date">{{item.addTime}}</div>
          </div>
          <!-- 分頁 -->
          <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="offset" :page-size="limit" 
              :page-sizes='[10,20]' layout="total, prev, pager, next, jumper " :total="total" :hide-on-single-page="true">
            </el-pagination>
          </div>
        </div>       
      </div>
      <div class="recommend" v-if="arr.length != 0">
        <div class="recommend_title">你可能喜歡</div>
        <!-- 對商品添加左右箭頭 -->
        <div class="recommend_content">
          <div class="icon_left" v-if="arr.length >=4"><img src="@/assets/left.png" alt="" @click='gotoleft($event)'></div>
          <!-- 超過4個出現左右按鈕 -->
          <div :class="arr.length >=4 ? 'collage_mostimg':'collage_smallimg'"  @mouseout="removeActiveAll()">
            <div class="collage_scroll">
              <div class="scroll_item" v-for="(item,index) in arr" :key='index' @mouseover="changeActive(index)" @mouseout="removeActive(index)"> 
                <!-- 商品圖片 -->
                <img :src="item.picUrl" alt="" @click="gotodetail(item)">
                <!-- 商品內容 -->
                <div class="scroll_item_con">
                  <!-- 標題 -->
                  <div class="item_con_title">{{item.name}}</div>
                  <!-- 簡介 -->
                  <div class="item_con_text">
                    <div>
                      pv:{{item.pvValue}}
                    </div>
                    <!-- 購物數量 -->
                    <div v-show="isHover == index?true:false">
                      <el-input-number size="mini" :max="item.number>0?item.number:1" :min="1" :value="item.quannum" v-on:input="handleBlur" @change="handleChange( item )"></el-input-number>
                    </div>
                  </div>
                  <!-- 價格 -->
                  <div class="item_con_price">
                    <div>${{item.counterPrice}}</div>
                    <div>{{item.retailPrice}}</div>
                  </div>
                  <!-- 加入購物車按鈕 -->
                  <div class="item_con_car" v-show="isHover == index?true:false">
                    <img src="@/assets/car1.png" alt="">
                    <div @click="tuiAddToCar(item)">加入購物車</div>
                  </div>
                </div>
              </div>                
            </div>
          </div>  
          <div class="icon_left" v-if="arr.length >=4"><img src="@/assets/right.png" alt="" @click='gotoright($event)'></div>
        </div>
      </div>
    </div>
    
 
    
  </div>
</template>

<script>
import {gooddetail,hotSellRecommend} from '@/api/index'
import {addItemsToCart,addordeleteGood} from '@/api/car'
import { getToken,removeToken,setToken } from '@/utils/auth' // 驗權
export default {
  name: 'classify',
  data () {
    return {
      imgUrl:null,//首圖
      imglist:[],//圖片列表
      goodnum:1,//商品詳情數量
      goodInput:1, //商品詳情數量輸入
      isIntro:true, //簡介控制
      arr:[],//推薦數據
      input_number_value:1,
      isHover:-1,      
      value1:5,
      gooddata:{},//商品數據
      kucunNum:0,
      userHasCollect:0,
      comment:[],//評論列表
      limit:10,//每頁顯示數
      offset:1,//第幾頁
      total:0,//總數
    }
  },
  mounted(){
    this.getdata()
    this.getTui()
  },
  methods:{
    gotodetail(item){
      this.$router.push({path:'/detail',query:{id:item.id,t: Date.now()}})
    },
    // 多圖向左移動
    gotoleft(event){
      var box = document.getElementsByClassName('collage_scroll')[0]
      var boxleft = box.offsetLeft;
      if(boxleft == 0){
        box.style.left = '0px'
      }else{
        box.style.left = boxleft + 300 + 'px'
      }    
       
    },
    // 多圖向右移動
    gotoright(event){
      var box = document.getElementsByClassName('collage_scroll')[0]
      var boxleft = box.offsetLeft;
      var lengthNum = box.children.length
      var boxParentWidth = box.parentNode.offsetWidth;
      if(boxleft <= (boxParentWidth-((lengthNum-1)*300))){
        console.log('最後壹張了')
      }else{
        box.style.left = boxleft - 300 + 'px'
      }
    },
    // 接口請求詳情
    getdata(){
      gooddetail({id:this.$route.query.id,offset:this.offset,limit:this.limit}).then(response => {
        if(response.errno == 0){
          this.imgUrl = response.data.info.gallery[0]
          this.imglist = response.data.info.gallery
          this.userHasCollect = response.data.userHasCollect
          this.kucunNum = response.data.productList[0].number
          this.gooddata = response.data.info
          this.comment = response.data.comment.data
          this.total = response.data.comment.count
        }else{

        }
        console.log(response)
      })
    },
    getTui(){
      hotSellRecommend({catoryId:6}).then(response => {
        if(response.errno == 0){
          if(response.data.goodsList.length != 0){
            this.arr = response.data.goodsList
            for(var i = 0;i<this.arr.length;i++){
              this.arr[i].quannum = 1
            }
          }else{
            this.arr = []
          }        
        }
      })
    },
    // 分頁
    handleSizeChange(val) {
      this.limit = val;
      this.getdata();
    },
    handleCurrentChange(val) {
      this.offset = val;
      this.getdata();
    },
    // 加入購物車
    addToCart(items,quannum){
      if(!getToken()){
        this.$router.push('login')
        return
          this.$confirm('您當前是遊客模式，是否確認購買', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(items.isOnSale){
          if(quannum > this.kucunNum){
            this.$message({
              type:'error',
              message:'加入失敗，該商品現有庫存為'+this.kucunNum
            })
          }else{
            var array = [items.id+'#'+quannum]
            addItemsToCart({idAndNumber:array,userId:getToken()}).then(response => {
              if(response.errno == 0){
                this.$message({
                  type:'success',
                  message:'加入成功，請前往我的購物車進行查看'
                })
                if(!getToken()){
                  setToken(response.data.userId)
                }
              }else{
                this.$message({
                  type:'error',
                  message:response.errmsg
                })
              }
              console.log(response)
            })
          }   
      }else{
        this.$message({
          type:'error',
          message:'很抱歉該商品已下架'
        })
      }
        }).catch(() => {
                   
        });
      }else{
         if(items.isOnSale){
          if(quannum > this.kucunNum){
            this.$message({
              type:'error',
              message:'加入失敗，該商品現有庫存為'+this.kucunNum
            })
          }else{
            var array = [items.id+'#'+quannum]
            addItemsToCart({idAndNumber:array,userId:getToken()}).then(response => {
              if(response.errno == 0){
                this.$message({
                  type:'success',
                  message:'加入成功，請前往我的購物車進行查看'
                })
                if(!getToken()){
                  setToken(response.data.userId)
                }
              }else{
                this.$message({
                  type:'error',
                  message:response.errmsg
                })
              }
              console.log(response)
            })
          }   
      }else{
        this.$message({
          type:'error',
          message:'很抱歉該商品已下架'
        })
      }
      }
      
      
         
    },
    // 詳情
    // 輸入購物數量
    handleBlur1(value){
      this.goodInput = value
    },
    // 計算購物數量
    handleGoodNum(){
      this.goodnum = parseInt(this.goodInput)
    },
    // 簡介和評論
    changeIntro(e){
      if(e == 0){
        this.isIntro = true
      }else if(e == 1){
        this.isIntro = false
      }
    },
    // 添加取消收藏
    addCoolect(){
      if(getToken()){
        addordeleteGood({"type": 0,"userId": Number(getToken()),"valueId": this.gooddata.id}).then(response => {
          if(response.errno == 0){
            this.getdata()
            this.$message({
              type:'success',
              message:response.data.remindMsg
            })
          }else{
            this.$message({
              type:'error',
              message:response.errmsg
            })
          }
          console.log(response)
        })
      }else{
        this.$message({
          type:'error',
          message:'請您先登錄'
        })
      }      
    },
    // 推薦
    // 輸入購物數量
    handleBlur(value){
      this.input_number_value = value
    },
    // 計算購物數量
    handleChange( data ) {
      let re = /^[0-9]+$/
      // if (!re.test(this.input_number_value)) {
      //   this.$message.error('請輸入大於1的正整數！')
      //   this.$nextTick(() => {
      //     data.quannum = parseInt(this.input_number_value)
      //     // data.quannum = this.input_number_value;
      //   })
      // }
      data.quannum = parseInt(this.input_number_value)
    },
    // 鼠標移入
    changeActive(index){
      this.isHover = index
    },
    // 鼠標移出
    removeActive(index){
      this.isHover = index
    },
    // 鼠標移出所有
    removeActiveAll(){
      this.isHover = -1
    },
    changebigImg(event,item){
      this.imgUrl = item
    },
    // 為妳推薦裏的添加購物車
    tuiAddToCar(items){
      if(items.isOnSale){
        if(getToken()){
          if(items.quannum > items.number){
            this.$message({
              type:'error',
              message:'加入失敗，該商品現有庫存為'+items.number
            })
          }else{
            var array = [items.id+'#'+items.quannum]
            addItemsToCart({idAndNumber:array,userId:getToken()}).then(response => {
              console.log(response)
              if(response.errno == 0){
                this.$message({
                  type:'success',
                  message:'加入成功，請前往我的購物車進行查看'
                })
              }else{
                this.$message({
                  type:'error',
                  message:response.errmsg
                })
              }
            }) 
          }        
        }else{
          this.$message({
            type:'error',
            message:'請您先登錄'
          })
        }
      }else{
        this.$message({
          type:'error',
          message:'很抱歉該商品已下架'
        })
      }
    },
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wrap{
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  background: #f5f5f5;
  /* background: #fff; */
  padding-top: 30px;
  padding-bottom: 30px;
  
}
.content{
  width: 70%;
  box-sizing: border-box;
  margin: 0px auto;
}
.detail{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.detail_left{
  width: 550px;
  box-sizing: border-box;
}
.imgbox{
  width: 100%;
  height: 412px;
  box-sizing: border-box;
  padding:20px 50px;
  box-sizing: border-box;
  background: white;
  border-radius: 4px;
}
.imgbox>img{
  width: 100%;
  height: 100%;
  /* height: auto; */
  background: white;
  object-fit: contain;
}
.imglist{
  width: 100%;
  height: 148px;
  padding:30px 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.imglist>div{
  width: 81px;
  height: 81px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white; 
  border-radius: 2px;
  margin-right: 30px;
  cursor: pointer;
}
.imglist>div>img{
  width: 57px;
  height: 57px;
  object-fit: contain;
}
.detail_right{
  width: 610px;
  height: 560px;
  box-sizing: border-box;
  padding: 20px;
  background: white;
}
.detail_title{
  font-size: 24px;
  font-weight: normal;
  color: #000;
  line-height: 36px;
  word-break:break-word;
  padding-bottom: 20px;
  border-bottom:  1px dashed #E5E5E5;
}
.detail_price{
  width: 570px;
  height: 127px;
  /* background: #fff; */
  background: #F5F5F5;
  box-sizing: border-box;
  padding: 10px;
  margin-top: 20px;
}
.detail_price>div:nth-child(1){
  font-size: 14px;
  font-weight: normal;
  color: #656565;
  line-height: 36px;
}
.detail_price>div:nth-child(1)>span{
  text-decoration: line-through;
  color: #101010;
}
.detail_price>div:nth-child(2){
  font-size: 14px;
  font-weight: normal;
  color: #656565;
  line-height: 36px;
}
.detail_price>div:nth-child(2)>span{
  font-size: 32px;
  font-weight: 600;
  color: #E3393D;
}
.detail_price>div:nth-child(3){
  display: flex;
  align-items: center;
  justify-content:flex-end;
  font-size: 14px;
  font-weight: normal;
  color: #666666;
  line-height: 36px;
  border-top: 1px dashed #E5E5E5;
}
.detail_price3{
  display: flex;
  align-items: center;
}
.detail_price3 img{
  width: 10px;
  height: 9px;
  margin-right: 10px;
}
.detail_price3 span{
  margin-left: 5px;
  font-size: 14px;
}
.detail_price3{
  margin-left: 20px;
}
.component{
  margin: 10px 0px;
  height: 200px;
  overflow: hidden;
}
.component p{
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  line-height: 25px;
  margin: 0px;
}
.addcar{
  display: flex;
  align-items: center;
}
.addcar>div:nth-child(1){
  height: 46px;
}
.addcar>div:nth-child(1)>>>.el-input-number{
  width: 150px;
  height: 46px;
  line-height: 46px;
}
.addcar>div:nth-child(1)>>>.el-input-number .el-input{
  line-height: 47px;
}
.addcar>div:nth-child(1)>>>.el-input__inner{
  line-height: 47px;
  height: 50px;
}
.addcar>>>.el-input-number__decrease,.addcar>>>.el-input-number__increase{
  background: #fff;
}
.addcar>>>.el-input-number__decrease:hover, .addcar>>>.el-input-number__increase:hover{
  color: #101010;
}
.addcar>>>.el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled), .addcar>>>.el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled){
  border-color: #DCDFE6;
}
.addcar>>>.el-input__inner:hover{
  border-color: #DCDFE6;
}
.addcar>>>.el-input__inner:not(.is-disabled){
  border-color: #DCDFE6;
}
.addcar>>>.el-input__inner:active{
  border-color: #DCDFE6;
}
.addcar>div:nth-child(2){
  width: 160px;
  height: 46px;
  background: #BE9A67;
  border-radius: 4px;
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 46px;
  text-align: center;
  margin-left: 20px;
  cursor: pointer;
}
.introduction{
  width: 100%;
  box-sizing: border-box;
  padding: 20px 30px;
  background: white;
  margin: 30px 0px;
}
.introduction_title{
  display: flex;
  align-items: center;
  height: 40px;
}
.introduction_title>div:nth-child(2){
  margin-left: 20px;
}
.is_in_Active{
  font-size: 18px;
  font-weight: 400;
  color: #BE9A67;
  line-height: 40px;
  border-bottom: 3px solid #BE9A67;
  cursor: pointer;
}
.is_in_unActive{
  font-size: 18px;
  font-weight: 400;
  color: #999999;
  line-height: 40px;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}
.introduction_con{
  margin-top: 20px;
}
.introduction_con>div{
  width: 100%;
  text-align: center;
}
.introduction_comment{
  margin-top: 20px;
  border-top: 1px solid #E5E5E5;
}
.comment_item{
  width: 100%;
  box-sizing: border-box;
  padding: 20px 0px;
  border-bottom: 1px solid #E5E5E5;
}
.comment_item_name{
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  line-height: 24px;
}
.comment_item_rate{
  margin-left: -2px;
}
.comment_item_text{
  font-size: 14px;
  font-weight: 400;
  color: #666666;
  line-height: 24px;
}
.comment_item_date{
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  line-height: 24px;
}
.recommend{
  width: 100%;
  box-sizing: border-box;
}
.recommend_title{
  font-size: 30px;
  font-weight: bold;
  color: #333333;
  line-height: 34px;
  padding-left: 20px;
}
.recommend_content{
  width: 100%;
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  box-sizing: border-box; 
  margin: 20px 0px;
}
.icon_left img{
  width: 30px;
  height: 56px;
  cursor: pointer;
  margin-top: 170px;
}
.collage_smallimg{
  width: 100%;
  height: 400px;
  /* height: 450px; */
}
.collage_smallimg>div{
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
.collage_smallimg>div>img{
  width: 285px;
  /* height: 253px; */
  height: 190px;
  margin: 0px 5px;
  object-fit: fill;
}
.collage_mostimg{
  width: 90%;
  height: 400px;
  /* height: 450px; */
  /* overflow-x: scroll; */
  position: relative;
  overflow: hidden;
}
.collage_mostimg>div{
  display: flex;
  justify-content: flex-start;
  position:absolute;
  left: 0px;
}
.scroll_item{
  width: 300px;
  box-sizing: border-box;
  padding: 10px;
  position: relative;
}
.scroll_item>img{
  width: 285px;
  /* height: 253px; */
  object-fit: fill;
  height: 190px;
}
.scroll_item_con{
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
}
.item_con_title{
  font-size: 22px;
  font-weight: 400;
  color: #101010;
  line-height: 36px;
  overflow: hidden;
  text-overflow:ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.item_con_text{
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
}
.item_con_text>div:nth-child(1){
  font-size: 20px;
  font-weight: 400;
  color: #BE9A67;
  line-height: 36px;
  overflow: hidden;
  height: 36px;
  text-overflow:ellipsis;
  white-space: nowrap;  
}
.item_con_text>div:nth-child(2){
  display: flex;
  align-items: center;
}
.item_con_text>>>.el-input-number,.item_con_text>>>.el-input-number--mini{
  width: 100px;
}
.item_con_text>>>.el-input-number__decrease,.item_con_text>>>.el-input-number__increase{
  background: #fff;
}
.item_con_text>>>.el-input-number__decrease:hover, .item_con_text>>>.el-input-number__increase:hover{
  color: #101010;
}
.item_con_text>>>.el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled), .item_con_text>>>.el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled){
  border-color: #DCDFE6;
}
.item_con_text>>>.el-input__inner:hover{
  border-color: #DCDFE6;
}
.item_con_text>>>.el-input__inner:not(.is-disabled){
  border-color: #DCDFE6;
}
.item_con_text>>>.el-input__inner:active{
  border-color: #DCDFE6;
}
.item_con_price{
  display: flex;
  align-items: center;
  margin: 15px 0px;
}
.item_con_price>div:nth-child(1){
  height: 20px;
  line-height: 20px;
  font-size: 20px;
  font-weight: 400;
  color: #FF1010;
}
.item_con_price>div:nth-child(2){
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  font-weight: 400;
  text-decoration: line-through;
  color: #999999;
  margin-left: 20px;
}
.item_con_car{
  width: 100%;
  height: 50px;
  background: #BE9A67;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.item_con_car>img{
  width: 37px;
  height: 30px;
}
.item_con_car>div{
  font-size: 20px;
  font-family: 59;
  font-weight: 400;
  color: #FFFFFF;
  margin-left: 10px;
  white-space: nowrap;
  cursor: pointer;
}
.pagination-container{
  margin-top: 10px;
}
.pagination-container>>>.el-pagination.is-background .el-pager li:not(.disabled).active{
  background: #BE9A67;
  color: white;
}
.pagination-container>>>.el-pagination.is-background .el-pager li:hover{
  color: #BE9A67;
}
.pagination-container>>>.el-pagination__editor.el-input .el-input__inner:hover,.pagination-container>>>.el-pagination__editor.el-input .el-input__inner:active{
  border-color: #BE9A67;
}
.pagination-container>>>.el-input__inner:active{
  border-color: #BE9A67;
}
.pagination-container>>>.el-select .el-input.is-focus .el-input__inner,.pagination-container>>>.el-pagination__sizes .el-input .el-input__inner:hover,.pagination-container>>>.el-select .el-input__inner:focus{
  border-color: #BE9A67;
}
.pagination-container>>>.el-input__inner:focus{
  border-color: #BE9A67;
}
</style>
